import React, {Component} from "react";
import {Image, StyleSheet, Text, View} from "react-native";
import {List, SwipeAction} from '@ant-design/react-native';
import {connect} from "react-redux";

const imageSize = 30
const rightView = [
    {
        text: '置顶',
        onPress: () => console.log('more'),
        style: {backgroundColor: 'gray', color: 'white'},
    },
    {
        text: '删除',
        onPress: () => console.log('delete'),
        style: {backgroundColor: 'red', color: 'white'},
    },
];

class ChatListItem extends Component {
    render() {
        const {img, msg, title} = this.props
        const date = <Text style={styles.extra}>{this.props.date}</Text>
        return (
            <SwipeAction
                autoClose={true}
                style={{backgroundColor: 'transparent', margin: 0, padding: 0}}
                right={rightView}
                onOpen={() => console.log('open')}
                onClose={() => console.log('close')}>
                <List.Item
                    extra={date} align={'middle'}
                    style={{backgroundColor: 'transparent', margin: 0, padding: 0}}
                    onPress={() => {
                        this.props.mainNavigation.push('ChatInput', {title: '李文浩'})
                    }}
                >
                    <View style={styles.item}>
                        <Image
                            style={styles.imgItem}
                            source={img}
                        />
                        <View style={styles.msg}>
                            <Text style={styles.msgTitle}>
                                {title}
                            </Text>
                            <Text style={styles.msgContent}>
                                {msg}
                            </Text>
                        </View>

                    </View>
                </List.Item>
            </SwipeAction>
        );
    }
}

const styles = StyleSheet.create({


    item: {
        flexDirection: 'row',
        justifyContent: 'center',
    },
    imgItem: {
        borderRadius: imageSize / 2,
        width: imageSize,
        height: imageSize,
        marginLeft: 8,
        marginRight: 10,
    },
    msg: {
        flexDirection: 'column',
        flex: 1
    },
    msgTitle: {
        fontWeight: 'bold'
    },
    msgContent: {
        color: 'gray'
    },
    extra: {
        fontSize: 12,
        color: 'gray'

    }
});


export default connect(
    (state) => {
        return {
            mainNavigation: state.mainNavigation
        }
    }
)(ChatListItem)
